<template>
	<view v-if="info">
		<view class="item-area">
			<image src="../static/card-bg.png" class="card-bg"></image>
			<image :src="info.bankImage" mode="widthFix" class="icon-bank"></image>
			<view class="u-flex-1 u-rela">
				<view class="u-font-30">{{info.bankName}}</view>
				<view class="u-font-24 type">储蓄卡</view>
				<view class="card-num">{{ numFormat(info.cardNo)}}</view>
			</view>
		</view>

		<view @click="showActionSheet" class="cell u-flex" hover-class="u-hover-class u-cell-hover">
			<image src="../static/icon-remove.png" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;"></image>
			<text class="u-font-32">解绑银行卡</text>
		</view>

		<u-modal v-model="show" @confirm="confirm" :content="content" :showTitle="false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNo: '',
				info: null,
				show: false,
				content: '解绑成功',
				userinfo: JSON.parse(uni.getStorageSync('userinfo'))
			};
		},
		onLoad(opts) {
			this.cardNo = opts.cardNo
			this.bankDetails()
		},
		methods: {
			async bankDetails() {
				let [err, res] = await uni.request({
					url: this.baseUrl + '/web/bank/query',
					method: 'POST',
					dataType: 'json',
					data: {
						cardNo: this.cardNo,
						ormtb410id: this.userinfo.ORMTB410ID, //二级客户ID
					},
				});
				console.log(res)
				if (res.data.code === 0) {
					this.info = res.data.data[0]
				}
			},
			numFormat(str) {
				var reg = /^(\d{4})\d+(\d{4})$/;
				return str = str.replace(reg, "$1 **** **** $2");
			},
			async bankUnbind() {
				uni.showLoading({ title: '请稍候...', mask: true })
				let [err, res] = await uni.request({
					url: this.baseUrl + '/web/bank/unbind',
					method: 'POST',
					dataType: 'json',
					data: {
						cardNo: this.cardNo,
						ormtb410id: this.userinfo.ORMTB410ID, //二级客户ID
					},
				});
				uni.hideLoading()
				if (res.code === 0) {
					this.content = res.msg || '解绑成功'
					this.show = true
				}
			},
			showActionSheet() {
				uni.showActionSheet({
					itemList: ['解除绑定'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.bankUnbind()
						}
					}
				})
			},
			confirm() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.item-area {
		height: 236rpx;
		border-radius: 8rpx;
		margin: 32rpx;
		position: relative;
		color: #FFFFFF;
		padding-top: 32rpx;
		display: flex;

		.icon-bank {
			width: 100rpx;
			margin-right: 16rpx;
			position: relative;
			margin: 0 32rpx;
		}

		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.card-num {
			font-size: 48rpx;
			font-weight: bold;
		}

		.type {
			opacity: 0.5;
			margin-top: 4rpx;
			margin-bottom: 32rpx;
		}
	}

	.cell {
		margin: 64rpx 32rpx;
		background: #F8F8F8;
		border-radius: 8rpx;
		padding: 24rpx 32rpx;
	}
</style>
